<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>产品展示列表</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/show-buy.css">
    <link rel="stylesheet" href="lib/swiper/package/css/swiper.min.css">
    <link rel="stylesheet" href="lib/mCustomScrollbar/jquery.mCustomScrollbar.css">
</head>

<body>
    <div class="srcoll">
    <!-- nav -->
    <div class="container-fluid hand-nav">
        <div class="row">
            <div class="col-sm-5">
                <div class="logo">
                    <img src="images/logo.png" alt="" class="center-block ">
                </div>
            </div>
            <div class="col-sm-7">
                <div class="col-sm-12 text-right ">
                    <a href="" class="weibo">
                        <img src="images/weibo.png" alt="">
                        诺丽美微博
                    </a>
                </div>
                <div class="col-sm-12 nav-con">
                    <a href="">首页</a>
                    <a href="">关于诺丽美</a>
                    <a href="">最新动态</a>
                    <a href="" class="nav-active">产品展示</a>
                    <a href="">专业课堂</a>
                    <form action="https://www.baidu.com/s?" method="GET" class="search">
                        <div>
                            <input type="text" name="word" placeholder="做女人要更美" required>
                            <button class="glyphicon glyphicon-search"></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="container-fluid banner">
    </div>

    <!-- list -->
    <div class="container list">
        <div class="row">
            <div class="col-sm-11 col-sm-offset-1 list-pos">
                <a href="javascript:;">首页</a>>>
                <a href="javascript:;">诺立美 </a>>>
                <a href="javascript:;">清痘控油系列 </a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-11 col-sm-offset-1 buy">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object " src="images/show-buy.jpg" alt="..." width="300px">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading">清痘调理液
                            <br>
                            <br>
                            <small>Acne Removing & Regularizing Toner
                                <br>
                                <br>
                                <span> 30ml</span>
                                <span> 日/夜</span>
                                <span>青春痘肌肤</span>
                            </small>
                        </h3>
                        <div class="tab">
                            <div class="tab-btn">
                                <span class="tab-btn-active">主要成分</span>
                                <span>作用</span>
                                <span>用法</span>
                                <span>搭配建议</span>
                            </div>
                            <div class="tab-con">
                                <div>
                                    去离子水、甘油、丙二醇、银杏提取液、蜂王浆活性精华、金银花提取液、绿茶提取液、尿囊素、水杨酸、维生素B3、维生素B6、咪唑烷基脲
                                </div>
                                <div>应该是祛痘</div>
                                <div>擦就完事了</div>
                                <div>建议买一箱</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 推荐 -->
    <div class="container recom">
        <div class="row">
            <div class="col-sm-11 col-sm-offset-1">
                <div class="buy-more">
                    <span>搭配效果更佳</span>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class=" swiper-container">
                            <div class="swiper-wrapper">
                                <div class="loop swiper-slide">
                                    <a href="javascript:;"> <img src="images/shop-items (1).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (2).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (3).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (4).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (6).png" alt=""></a>
                                </div>
                                <div class="loop swiper-slide">
                                    <a href="javascript:;"> <img src="images/shop-items (1).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (2).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (3).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (4).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (6).png" alt=""></a>
                                </div>
                                <div class="loop swiper-slide">
                                    <a href="javascript:;"> <img src="images/shop-items (1).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (2).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (3).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (4).png" alt=""></a>
                                    <a href="javascript:;"> <img src="images/shop-items (6).png" alt=""></a>
                                </div>
                            </div>
                            <!-- Add Arrows -->
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="container-fluid foot">
        <div class="row">
            <div class="col-sm-7 ">
                <img src="images/logo.png" alt="" class="img-responsive">
            </div>
            <div class="col-sm-5 foot-mess">
                <a href="">联系我们</a>
                <a href="">关于诺丽美</a>
                <a href="">最新动态</a>
                <a href="">产品展示</a>
                <a href="">专业课堂</a>
                <a href="">粤ICP备号12088417-1</a>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/swiper/package/js/swiper.min.js"></script>
<script src="lib/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    // console.log($('.tab-con>*'))
    $('.tab-con>div').first().show(0)
        .siblings().hide(0)
    $('.tab-btn>span').click(function () {
        $(this).addClass('tab-btn-active')
            .siblings()
            .removeClass('tab-btn-active')
        $('.tab-con>div').eq($(this).index()).show()
            .siblings().hide()
    })


    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true
    });
    var h = $(window).height();
    $('.srcoll').css('height', h);
    $(".srcoll").mCustomScrollbar({
        theme: "dark",
        scrollButtons: {
            scrollInertia: 1000,
            mouseWheelPixels: 200,

        }
    });
</script>

</html>